﻿html, body {height: 100%;font-family: "Microsoft YaHei",Helvetica,Arial,sans-serif;overflow: hidden;}
.layui-main{ width: 100% !important;}
.main {height: 100%;margin-top: -30px;padding-top: 0px;padding-left: 0px;padding-right: 0px;overflow-y: auto;overflow-x: hidden;}
.left-right {background: rgb(238,241,248);border: 1px solid rgb(182,189,204);}
.navbar-fotter {margin-bottom: 0;z-index: 10;background-color: #297fb7;}
.title {height: 50px;line-height: 50px;color: #767678;padding: 0 15px;}
.main .title {background: #eee;}
.left-right .title {background: #dce0ea;}
.badge {background-color: green;}
.title .badge {background-color: orange;}
.title .badge {margin-top: 18px;}
.title-nick {color: #297fb7;cursor: pointer;}
.chat-contents {width: 100%;height:400px;overflow-y: scroll;overflow-x: hidden;}
/*.chat-tools {height: 30px;bottom: 230px;position: absolute;width: 100%;background-color: #eef1f8;}*/
.chat-tools {height: 30px;width: 100%;background-color: #eef1f8;}
.chat-send-messsage {position: absolute;z-index: 1;width: 100%;bottom: 60px;}
/*.chat-send-messsage {z-index: 1;width: 100%;bottom: 60px;}*/
.chat-send-messsage textarea {width: 100%;height: 120px;overflow: auto;outline: none;resize: none;border: none;padding: 5px;}
.enter-description {height: 50px;line-height: 50px;color: #999;margin-top: -12px;}
.chat-send-messsage input[type=submit] {position: absolute;right: 15px;bottom: 5px;height: 40px;/*background: #e56d3e;*/
border: none;border-radius: 5px;color: #fff;cursor: pointer;font-size: 16px;letter-spacing: 5px;}
.online-ul li, .breadcrumb li {cursor: pointer;}
.online-ul li:first-child{    background-color: #89a25f;}
.online-ul li:not(.online-on):hover {background-color: #f5f5f5;}
.online-ul li:first-child:hover{    background-color: #89a25f;}
.online-ul li:first-child .unread{ display: none;}
.two {background: #5674B6 !important;color: #fff;}
.three {background: #D05E5E !important;color: #fff;}
.four {background: #ACD35D !important;color: #fff;}
.five {background: #EA9739 !important;color: #fff;}
.six {background: #B6568D !important;color: #fff;}
.online-on{background: #D05E5E !important;color: #fff;}
.breadcrumb{    padding: 3px 15px;}
.breadcrumb span {width: 21px;height: 19px;display: inline-block;background: url('http://www.zhanghuanglong.com/Images/Common/icon_2.png') -67px -47px no-repeat;cursor: pointer;}
.breadcrumb span.font {background-position: -67px -47px;}
.breadcrumb span.emoji {background-position: 0 0;}
.breadcrumb span.image {width: 23px;background-position: 0 0;background: url('http://www.zhanghuanglong.com/Images/Common/upload_v3.png') 0px 0px no-repeat;}
.breadcrumb span.graffiti { background: none;}
.breadcrumb > li + li:before {font-size: 20px;}
.enter-description .text-info {margin-left: 15px;margin-right: 15px;}
.chat-main {position: relative;}
.all-left {text-align: left;}
.all-right {text-align: right;}
.chat-contents ul {list-style: none;padding: 15px 10px;}
.chat-contents ul li {padding: 5px;}
.chat-time {font-size: 12px;color: #aaa;text-align: center;height: 30px;line-height: 30px;}
.chat-main .img-circle {position: absolute;top: 30px;cursor: pointer;}
.all-left .img-circle {left: 5px;}
.all-right .img-circle {right: 5px;}
.chat-content {text-align: left;display: inline-block;word-wrap: break-word;word-break: break-all;background: #d9ebf7;color: #0174a9;border-radius: 8px;max-width: 85%;padding: 10px;letter-spacing: 1px;max-width: 80%\9;/* background-color: #3d85aa; */
/* color: white; */
font-family: "Microsoft YaHei",Helvetica,Arial,sans-serif;}
.all-left .chat-content {margin-left: 34px;    background: #e2e2e2;color: #000;}
.all-right .chat-content {margin-right: 34px;background-color: #5FB878;color: #fff;}
.chat-nick{ cursor: pointer;}
.chat-head, .chat-body {padding: 5px;}
.chat-head small:before {content: '\005B ';}
.chat-head small:after {content: '\005D';}
.chat-head small {margin: 0 7px;color: #aaa;}
.all-left .chat-head small:first-child, .all-right .chat-head small:last-child {display: none;}
.all-left .chat-head small:last-child, .all-right .chat-head small:first-child {display: inline-block;}
.chat-body {padding: 5px 30px;}
.triangle {position: absolute;top: 45px;border-top: 0px solid transparent;border-bottom: 20px solid transparent;}
.all-left .triangle {left: 54px;border-right: 15px solid #d9ebf7;border-right: 15px solid #e2e2e2;}
.all-right .triangle {right: 54px;border-left: 15px solid #d9ebf7;border-left: 15px solid #5FB878;}
/*内容的图片*/
.chat-content img {vertical-align: baseline;}
/*居中系统消息*/
.all-center .chat-body{text-align: center   }
.all-center .img-circle, .all-center .triangle, .all-center .chat-head{ display: none; }
.all-center .chat-content{background-color: #ccc;color: darkgoldenrod;padding: 3px 11px;}

/*语音*/
.chat-yuyin{ display: none;}
.all-yuyin .chat-content{ display: none;}
.all-yuyin .chat-yuyin{     display: inline-block;width: 100px;cursor: pointer;}
.all-yuyin .iconfont{    display: inline-block;width: 20px;overflow: hidden;font-size: 14px;}

/*底部的权限*/
p.footer{ display: none;}
.chat-on{color:orange}
/*右键菜单*/
.k-c-m {display: none;border: 1px solid #ccc;padding: 0px;position: absolute;z-index: 9999;opacity: 0.9;}
.k-c-m-ul {background-color: rgb(248,243,247);margin: 0;padding: 0;width: 150px;}
.k-c-m-ul li {list-style: none;cursor: pointer;}
.k-c-m .k-c-m-item {background-color: #fff;}
.k-c-m .k-c-m-item i {display: inline-block;width: 40px;height: 100%;padding: 4px;background-color: rgb(233,234,234);text-align: center;vertical-align: middle;}
.k-c-m .k-c-m-item span {display: inline-block;padding-left: 10px;width: 105px;    padding: 4px;}
.k-c-m .k-c-m-item :hover i {background-color: rgb(51, 127, 209);color: #fff;}
.k-c-m .k-c-m-item :hover {background-color: rgb(51, 127, 209);color: #fff;}
.display{display: none !important   }
/*顶部菜单栏的*/
.div-header-center>ul{    margin-bottom: 0px;}
.div-more a,.div-more ul{ padding-left: 0px;}
.div-header-center{ width: 100% !important;}
/*给全屏加上背景图同时让别的透明2016-12-11*/
.chat-bg {-ms-background-size: contain;background-size: contain;background-image: url(/Images/bg/4.jpg);    background-size: cover;background-image: url(/Images/bg/5.jpg);}
.chat-bg .left-right, .chat-bg .left-right .title , .chat-bg .main .title, .chat-bg .chat-contents,.chat-bg .chat-send-messsage,.chat-bg .chat-tools {background: #eef1f8;background: rgba(238,241,248,0.7);}
.chat-bg textarea,.chat-bg .breadcrumb ,.chat-bg .list-group-item {background: 0 0;}
.chat-bg .chat-tools{height: 44px;bottom: 157px;}
.chat-bg .main .title{border-bottom: 1px solid white;}
@media (max-width: 767px) {
   .main{    margin-top: 0px;
    padding-top: 0px;}
   .chat-contents{ top: 50px;}
}

/*右侧公告2016-12-11*/
.notice{padding :15px;color: #317745;letter-spacing: 0.5px;}

.breadcrumb i{color: #4e8ab0;font-size: 20px;}

#skin-main{ margin-top: 20px;margin-left: 20px;}
#skin-main li{  margin: 10px;line-height: 60px;text-align: center;background-color: #f6f6f6;}
#skin-main li,#skin-main li img{width: 86px;height: 60px;cursor: pointer;}
#skin-main li{ float: left;}

.change-log{    padding: 10px;}
.change-log p{margin: 0;font-size: 15px;padding: 3px;color: #777;}
.change-log h3{ text-align: center;}
.change-log .cl-time{    padding: 10px;color: orange;}

.btn-speech{ right: 120px !important;}
.center-main{ max-width: 100%;width: 100%;height: 100%;}
.links{ display: none;}